<template>

	<view class="bg">
		<view class="share">
			分享到（微信、抖音…）即可获得瓶盖奖励
		</view>
		<view class="rateMain">
			<view class="rateNum">
				<view class="rateText">商品评价</view>
				<uni-rate v-model="contentData.level" allow-half size="30" color="#D6D6D6" active-color="#C30D23" />
				<view class="rateText num">{{contentData.level*2}}.0</view>
				<view v-if="contentData.level == 5 " class="rateText very">非常推荐</view>
			</view>
		</view>
		<view class="data">
			<view class="dataImg">
				<image class="imgg" :src="data.mainImgUrl" mode=""></image>
			</view>
			<view class="dataMain">
				<view class="title">{{data.name}}</view>
				<view class="sku">{{skus.skuName}}</view>
				<view class="price">
					<span class="marketPriceFee">￥{{data.marketPriceFee/100}}</span>
					<span class="priceFee">￥{{data.priceFee/100}}</span>
				</view>
			</view>
		</view>
		<view class="pj">
			<view class="comment">评价</view>
			<textarea class="etxtare" @input="descInput" v-model="contentData.content" maxlength="100"
				placeholder="请认真填写您对此商品的评价～"></textarea>
			<view class="remnant">{{remnant}}/100</view>
		</view>
		<view class="scimg">
			<!-- 上传视频或者图片 -->
			<view class="up-page">
				<!--图片-->
				<view class="show-box" v-for="(item,index) in imageList" :key="index">
					<image class="full" :src="item" :data-src="image" @tap="previewImage(item)">
					</image>
					<view class="delect-icon" @tap="delect(index)">
						<image class="full" :src="clearIcon" mode=""></image>
					</view>
				</view>
				<!--视频-->
				<view class="show-box" v-for="(item1, index1) in videoList" :key="index1">
					<video class="full" :src="item1"></video>
					<view class="delect-icon" @tap="delectVideo(index1)">
						<image class="full" :src="clearIcon" mode=""></image>
					</view>
				</view>
				<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" :class='[{boxmode:!isnull},{nobase: isnull}]'>
					<image class="img22" src="../../static/wine-index/zxj.png" mode=""></image>
					<view class="tjsptu">添加图片/视频</view>
				</view>
			</view>
		</view>
		<view class="confirm" @tap="confirmRate()">发表评价</view>
	</view>

</template>
<script>
	const http = require('../../utils/http.js')
	import config from '../../utils/config.js'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	export default {
		data() {
			return {
				orderItemId:'',
				userId:'',
				isnull: true,
				spuId: '',
				orderId: '',
				data: {},
				skus: {},
				contentData: {
					content: '', //评价内容
					level: 5, //评价星级
					uploadList: [], //评论接口上传视频图片地址
				},
				remnant: 100,
				// 图标
				clearIcon: '',
				resourcesUrl: config.resourcesUrl,
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //本地上传存放图片的地址
				videoList: [], //本地上传视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount: 9 //图片和视频允许上传的总数
			}
		},
		onUnload() {
			(this.imageList = []), (this.sourceTypeIndex = 2), (this.sourceType = ['拍摄', '相册', '拍摄或相册']);
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options)
			this.spuId = options.spuId
			this.orderId = options.orderId
			this.orderItemId = options.orderItemId
		},
		mounted() {
			let _this = this
			uni.getStorage({
				key:'userId',
				success(res) {
					_this.userId = res.data
					console.log(_this.userId)
				}
			}),
			_this.getProdInfo()
		},
		methods: {
			//上传视频图片
			loadimg1(){
				return new Promise((resolve, reject) => {
				        let img1
				        	for (img1 in this.imageList) {
				        		const params = {
				        			url: '/gscloud_biz/oss/upload_minio',
				        			filePath: this.imageList[img1],
				        			name: 'file',
				        			callBack: res => {
				        				console.log(res)
				        				let data = JSON.parse(res).data
				        				let resourcesVal = this.resourcesUrl + '/' + data.dir + data.fileName
				        				console.log(resourcesVal)
											this.contentData.uploadList.push(resourcesVal)
				        				console.log(this.contentData.uploadList)
				        			}
				        		}
				        		http.upload(params)
				        	}
				        	let video1
				        	for (video1 in this.videoList) {
				        		const params = {
				        			url: '/gscloud_biz/oss/upload_minio',
				        			filePath: this.videoList[video1],
				        			name: 'file',
				        			callBack: res => {
				        				console.log(res)
				        				let data1 = JSON.parse(res).data
				        				let resourcesVal1 = this.resourcesUrl + '/' + data1.dir + data1.fileName
				        				console.log(resourcesVal1)
											this.contentData.uploadList.push(resourcesVal1)
				        			}
				        		}
				        		http.upload(params)
				        	}
							console.log("1");
				    });
			},
			//评价上传
			confirm(){
				 return new Promise((resolve, reject) => {
				        const param1 = {
				        	url: '/gscloud_product/app/spuEvaluation/save',
				        	method: 'POST',
				        	data: {
								orderItemId: this.orderItemId,
								userId: this.userId,
				        		shopId: this.data.shopId,
				        		spuId: this.spuId,
				        		orderId: this.orderId,
				        		level: this.contentData.level * 2,
				        		picJson: JSON.stringify(this.contentData.uploadList),
				        		content: this.contentData.content
				        	},
				        	callBack: res => {
				        		console.log(res)
				        	}
				        }
				        http.request(param1)
				        console.log("2");
						console.log("run");
				    });
			},
			confirmRate(){
			    Promise.all([
			        this.loadimg1(),
					setTimeout(()=>{
						this.confirm()	
					},1000)
			    ]).then(res => {
			    })
			},
			//剩余字数
			descInput() {
				var txtVal = this.contentData.content.length;
				this.remnant = 100 - txtVal;
			},
			/**
			 * 获取商品详情
			 */
			getProdInfo() {
				uni.showLoading()
				const params = {
					url: '/gscloud_product/ua/spu/prod_info',
					method: 'GET',
					data: {
						spuId: this.spuId
					},
					callBack: res => {
						uni.hideLoading()
						console.log(res)
						this.data = res
						this.skus = res.skus[0]

					}
				}
				http.request(params)
			},
			//点击上传图片或视频
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: this.maxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						}
						if (this.imageList) {
							this.isnull = false
						}
						console.log('tttttttt列表')
						console.log(this.imageList)
						console.log('tttttttt列表')
					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: this.maxCount,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						this.videoList = this.videoList.concat(res.tempFilePath);
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						}
						if (this.videoList) {
							this.isnull = false
						}
						console.log('水水水水视频列表')
						console.log(this.videoList)
						console.log('水水水水视频列表')

					}
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
						if (this.videoList == '' && this.imageList == '') {
							this.isnull = true
						}
						console.log(this.isnull)
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
						}
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
						if (this.videoList == '' && this.imageList == '') {
							this.isnull = true
						}
					}
				});
			},
		}
	}
</script>
<style lang="scss">
	.bg {
		position: relative;
		background: #fff;
		min-height: 100vh;
	}

	.share {
		height: 66rpx;
		line-height: 66rpx;
		background: linear-gradient(222deg, #FE5E42 0%, #FF965D 100%);
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}

	.rateMain {
		padding: 40rpx 30rpx;

		.rateNum {
			display: flex;
			align-items: center;

			.rateText {
				margin-right: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.num {
				font-weight: 500;
				color: #C30D23;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.very {
				font-weight: 400;
				color: #C30D23;
				font-size: 28rpx;
			}
		}
	}

	.data {
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;

		.dataImg {
			.imgg {
				width: 164rpx;
				height: 144rpx;
			}
		}

		.dataMain {
			margin-left: 30rpx;

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 能够显示的行数，超出部分用...表示*/
				-webkit-box-orient: vertical;
			}

			.sku {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin: 6rpx 0;
			}

			.marketPriceFee {
				font-size: 30rpx;
				font-weight: 600;
				color: #C30D23;
			}

			.priceFee {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-left: 10rpx;
				text-decoration: line-through;
			}
		}
	}

	.pj {
		position: relative;
		margin: 50rpx 30rpx;

		.comment {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.etxtare {
			opacity: 1;
			font-size: 28rpx;
			font-weight: 400;
			padding-left: 15px;
			padding-top: 15px;
			width: 87vw;
			height: 274rpx;
			border-radius: 8rpx;
			border: 2rpx solid #CCCCC0;
		}

		.remnant {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			position: absolute;
			right: 5%;
			bottom: 5%;
		}
	}

	/* 统一上传后显示的盒子宽高比 */
	.boxmode {
		margin: 0rpx 30rpx;
		width: 25vw;
		height: 25vw;
		background: #F8F8F8;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.img22 {
			width: 56rpx;
			height: 56rpx;
		}

		.tjsptu {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}

	.nobase {
		background: #F8F8F8;
		width: 90vw;
		margin: 0rpx 30rpx;
		height: 25vw;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.img22 {
			width: 56rpx;
			height: 56rpx;
		}

		.tjsptu {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}

	.full {
		width: 100%;
		height: 100%;
	}

	.up-page {
		padding-bottom: 100px;
		background: white;
		display: flex;
		flex-wrap: wrap;
		display: flex;
		width: 100%;

		.show-box:nth-child(3n) {
			margin-right: 0;
		}

		.show-box {
			position: relative;
			margin-bottom: 4vw;
			margin-right: 4vw;
			@extend .boxmode;

			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}

	.confirm {
		position: absolute;
		margin: 50rpx 30rpx;
		width: 90vw;
		height: 80rpx;
		background: #C30D23;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		bottom: 0;
	}
</style>
